<template>
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 apph">
  <div class="logo">
    <img width="100%" src="https://static.aimeike.tv/assets/img/logo/logo.png" alt="">
  </div>
  <ul class="apph-right">
    <li>
      <router-link to="/home">
        首页
      </router-link>
    </li>
    <li>
      <router-link to="/video">
        视频模板
      </router-link>
    </li>
    <li>
      <router-link to="/vip">
        会员特权
      </router-link>
    </li>
    <li>
      <b-button-group v-if="!userInfo.isLogin">
        <b-button variant="outline-success">登录</b-button>
        <b-button variant="success">注册</b-button>
      </b-button-group>
      <b-button v-else variant="success">我的视频</b-button>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      userInfo:{
        isLogin:false
      }
    }
  }
}
</script>

<style scoped>
.apph{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.logo{
  width: 100px;
}
.apph-right{
  height: 60px;
  width: 30%;
  display: flex;
  margin: 0;
  justify-content: space-between;
  align-items: center;
}
a{
  text-decoration: none;
  color: #2c3e50;
  display: block;
  height: 60px;
  line-height: 60px;
  position: relative;
}
a:hover{
  color: #2c3e50;
}
a.router-link-exact-active:after{
  display: block;
  content: "";
  width: 100%;
  height:5px;
  background-color: black;
  position: absolute;
  left: 0;
  bottom: 0;
}
</style>